Velocity.js 实现弹出式相框

发表于   |   分类于   |  

Velocity.js实现弹出式相框-慕课网

个人练习代码

本课程将使用 velocity.js 开发一个弹出式相框。首先和大家一起去认识和了解 velocity.js 强大的动画制作功能，然后通过一些小案例由浅入深地掌握它的的用法，最后通过一个真实案例来体会 velocity.js 在项目开发中的威力。让我们武装上 velocity.js ，从此网页变得生动起来。

1 课程介绍（略）

2 Velocity.js 基础

Velocity.js官网

2.1 Velocity.js 简介

  • 比 css3动画兼容性更好（支持到 IE8 和 Android 2.3）

2.2 Velocity.js 基本用法

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Velocity.js Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="div1" class="box"></div>
    <div id="div2" class="box"></div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.js"></script>
<script src="js/script.js"></script>
</html>

script.js

1
2
3
4
5
6
7
8
9
10
11
/**
 * Created by tonyearth on 2016/12/13.
 */
(function ($) {
    $('#div1').velocity({
        width: '300px'
    }, {
        duration: 3000
    })

})(jQuery)

2.3 制作动画序列的三种方法

动画序列（顺序执行的一系列动画）可以有三种实现方式：

  • 方式一：通过 delay 让后面的动画延迟到前面的动画完成后执行
1
2
3
4
5
6
7
8
9
10
11
$('#div1').velocity({
        width: '300px'
    }, {
        duration: 3000
    })
$('#div2').velocity({
        width: '300px'
    }, {
        duration: 3000
		  delay: 3000
    })
  • 方式二：将后一个动画嵌套进前一个动画的 complete 回调中执行
1
2
3
4
5
6
7
8
9
10
11
12
$('#div1').velocity({
        width: '300px'
    }, {
        duration: 3000,
		  complete: function () {
			$('#div2').velocity({
		        width: '300px'
    		}, {
        		duration: 3000
    		})
		   }
    })
  • 方式三(推荐)：$.Velocity.RunSequence
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var seq = [
    {
        elements: $('#div1'),
        properties: {
            width: '300px'
        },
        options: {
            duration: 3000
        }
    },
    {
        elements: $('#div2'),
        properties: {
            width: '300px'
        },
        options: {
            duration: 3000
        }
    },
    {
        elements: $('#div3'),
        properties: {
            width: '300px'
        },
        options: {
            duration: 3000
        }
    }
]

$.Velocity.RunSequence(seq)

2.4 预定义动画和自定义动画

预定义动画（pre-registered effects）

说明： Velocity.js 预定义的动画，可以在官网查看预定义动画的效果


1
2
3
$('div1').on('mouseover', function () {
    $(this).velocity('callout.shake')// 预定义动画
})

自定义动画效果

定义自定义动画效果，有两个方式，用法完全一样:

  1. $.Velocity.RegisterEffect
  2. $.Velocity.RegisterUI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 定义动画效果
$.Velocity.RegisterUI('lixin.pulse', {
    defaultDuration: 300,
    calls: [
        // 前 50% 的时间段,水平方向伸缩 1.1 倍
        [{scaleX: 1.1}, 0.5],
        // 后 50% 的时间段,水平方向伸缩 1 倍（复原）
        [{scaleX: 1}, 0.5]
    ]
})
// 应用动画效果
$('#div2').on('mouseover', function () {
    $(this).velocity('lixin.pulse')
})

3 弹出式相框案例实现

3.1 卡片正面

3.2 卡片背面

3.3 入场动画和按钮点击后的动画

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Velocity.js Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <img src="img/back.jpg" alt="">
            <img class="buddy" src="img/head.jpg" alt="">
            <div class="inner">
                <h3>慕课网</h3>
                <span>慕课网，只学有用的</span>
                <div class="btn">查看课程</div>
            </div>
        </div>
        <div class="pop">
            <div class="close">&times;</div>
            <h3>慕课网</h3>
            <span>慕课网，只学有用的</span>
            <img src="img/pic1.jpg" alt="">
            <img src="img/pic2.jpg" alt="">
            <img src="img/pic3.jpg" alt="">
            <img src="img/pic4.jpg" alt="">
        </div>
    </div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.js"></script>
<script src="js/script.js"></script>
</html>

script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/**
 * Created by tonyearth on 2016/12/13.
 */
(function ($) {
    var container = $('.container')
    var box = $('.box')
    var buddy = $('.buddy')
    var pop = $('.pop')
    var open = $('.btn')
    var close = $('.close')
    var imgs = pop.find('img')

    // 从下往上滑动并淡入
    $.Velocity.RegisterUI('mqs.slideUpIn', {
        defaultDuration: 500,
        calls: [
            // 数组中，第一个数字是结束时的值，第二个数字是开始时的值
            [{opacity: [1, 0], translateY: [0, 100]}]
        ]
    })

    // 从上往下滑动并淡出
    $.Velocity.RegisterUI('mqs.slideDownOut', {
        defaultDuration: 300,
        calls: [
            // 数组中，第一个数字是结束时的值，第二个数字是开始时的值
            [{opacity: [0, 1], translateY: [100, 0]}]
        ]
    })

    // 放大淡出
    $.Velocity.RegisterUI('mqs.scaleIn', {
        defaultDuration: 300,
        calls: [
            [{opacity: [1, 0], scale: [1, 0.3]}]
        ]
    })

    // 缩小淡出
    $.Velocity.RegisterUI('mqs.scaleOut', {
        defaultDuration: 300,
        calls: [
            [{opacity: [0, 1], scale: [0.3, 1]}]
        ]
    })

    // 入场动画序列
    // 1. 容器延迟 300 ms 后先出现
    // 2. 其它部分
    var seqInit = [{
        elements: container,
        properties: 'mqs.slideUpIn',
        options: {
            delay: 300
        }
    }, {
        elements: box,
        properties: 'mqs.slideUpIn',
        options: {
            // 值为 false，表示和序列中上一个动画同时开始。默认为 true， 表示在上一个动画完成之后才开始。
            sequenceQueue: false
        }
    }, {
        elements: buddy,
        properties: 'mqs.slideUpIn',
        options: {
            sequenceQueue: false,
            delay: 60
        }
    }]

    // 点击"查看课程"后触发的转场动画序列
    // 1. 卡片正面出场
    // 2. 开片背面入场
    var seqClick = [{
        elements: container,
        properties: 'mqs.slideDownOut'
    }, {
        elements: box,
        properties: 'mqs.slideDownOut',
        options: {
            sequenceQueue: false
        }
    }, {
        elements: container,
        properties: 'mqs.slideUpIn'
    }, {
        elements: pop,
        properties: 'mqs.slideUpIn',
        options: {
            sequenceQueue: false
        }
    }, {
        elements: imgs,
        properties: 'mqs.scaleIn'
    }]

    // 关闭卡片背面后触发的转场动画序列
    // 1. 卡片背面出场
    // 2. 开片正面面入场
    var seqClose = [{
        elements: imgs,
        properties: 'mqs.scaleOut'
    }, {
        elements: container,
        properties: 'mqs.slideDownOut'
    }, {
        elements: pop,
        properties: 'mqs.slideDownOut',
        options: {
            sequenceQueue: false
        }
    }, {
        elements: container,
        properties: 'mqs.slideUpIn'
    }, {
        elements: box,
        properties: 'mqs.slideUpIn',
        options: {
            sequenceQueue: false
        }
    }]

    $.Velocity.RunSequence(seqInit)
    open.on('click', function () {
        $.Velocity.RunSequence(seqClick)
    })
    close.on('click', function () {
        $.Velocity.RunSequence(seqClose)
    })
})(jQuery)